<template>
	<!-- 检索 -->
	<div class="search">
		<n-input-group>
			<n-button size="large" type="primary"> <i-ri:baidu-fill /> </n-button>
			<n-auto-complete
				size="large"
				v-model:value="keyword"
				:options="options"
				@change="getKeywords"
				autofocus
				clearable
				@keyup.enter="search"
				round
				placeholder="请输入检索内容"
			/>
			<n-button
				type="primary"
				size="large"
				round
				@click="search"
				@keyup.enter="search"
			>
				<i-ic:baseline-search />
			</n-button>
		</n-input-group>
	</div>
	<!-- 导航 -->
	<div class="content">
		<template v-for="item in datas">
			<div class="my-title">
				<i-vscode-icons:file-type-appsemble /> {{ item.typeName }}
			</div>
			<div class="grid-link">
				<div v-for="linkItem in item.links">
					<a :href="linkItem.url" target="_blank">
						<div class="item-link-img">
							<img :src="linkItem.icon" alt="img" />
						</div>
						<div class="item-link-title">
							<strong>{{ linkItem.title }}</strong>
						</div>
					</a>
				</div>
			</div>
		</template>
	</div>

	<!-- 设置 -->
	<div class="setting">
		<n-button strong secondary circle type="info">
			<template #icon>
				<i-ic:baseline-settings />
			</template>
		</n-button>
	</div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { datas } from './data'
import { useRequest } from 'vue-request'
import { da } from 'date-fns/locale'

const { isDark, toggleDark } = useDarks()

const { t, toggleLocale, language } = useLanguage()

const theme = computed(() => (isDark.value ? 'dark' : 'light'))
const keyword = ref<any>('')

const search_types = [
	{ url: 'https://www.baidu.com/s?wd=', type: 'baidu' },
	{ url: 'https://kaifa.baidu.com/searchPage?wd=', type: 'develop' },
	{ url: 'https://cn.bing.com/search?q=', type: 'bing' },
	{ url: 'https://www.google.com/search?q=', type: 'google' },
]

function search() {
	let wd = keyword.value
	console.log('wd:', wd)
	let url = search_types[0].url + keyword.value
	window.open(url)
	keyword.value = ''
}

watch(
	() => keyword.value,
	async (value) => {
		getKeywords()
	}
)

function getKeywords() {
	let wd = keyword.value
	console.log('wd:', wd)
	$.ajax({
		url: 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=32617,1440,32745,7542,32795,32723,32231,7517,32781,32116,32719,26350',
		jsonp: 'cb',
		//jsonp是jQuery提供的方法
		//百度是根据以cb开头的方法名字，所以通过jsonp来定义
		//服务器通过这个来得到函数的名字
		data: { wd: wd },
		//kw是input的id值，用来拼接我们在搜索框中输入的值，这个参数在data中传递
		//之前是在url属性中写入  "接口地址wd"='+kw'
		dataType: 'jsonp',
		//必须使用jsonp，这是跨域接口，指定返回的参数类型
		success: setOptions,
	})
}

// 设置值
const options = ref<any>([])
function setOptions(data: any) {
	let keys: any[] = []
	data.g.forEach((item: any) => {
		keys.push(item.q)
	})
	options.value = keys
}
</script>
<style>
.my-title {
	padding: 5px;
	margin-top: 15px;
}

.grid-link {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	grid-gap: 25px;
}

.item-link-img {
	background-color: #f4f5f9;
	width: 72px;
	height: 72px;
	border-radius: 10px;
	margin: 0 auto;
}

.item-link-img:hover {
	border: 1px solid;
	box-shadow: inset 0 0 20px #f4f5f9, 0 0 20px rgba(255, 255, 255, 0.2);
	outline-offset: 15px;
	text-shadow: 1px 1px 2px #427388;
}

.item-link-img img {
	border-radius: 10px;
	width: 72px;
	height: 72px;
	line-height: 72px;
}
.item-link-title {
	color: #354b5e;
	margin-top: 5px;
	text-align: center;
}
</style>
